import React from 'react'
import MileageDataFilter from "../../components/Report/MileageDataFilter";
import MileageDataTable from "../../components/Report/MileageDataTable";
import {Card,Radio,Icon} from "antd";
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import {fetchMileageReportData} from "../../services/report";
import {getTimeDistance} from "../../utils/utils";
import {connect} from "react-redux";
import {base_url} from "../../config/const";
import getDeviceList from "../../models/selectors";
import {FETCH_DEVICES} from "../../models/device/const";
import request from '@/utils/request';
import {DEVICE_MILEAGE} from "../../models/myRoprt/const";
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
// Mileage page  4 (明细/日报/周报/月报)

@connect(({ device}) => {
  return {
    deviceList:device
  }
})
class Mileage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'day',
      sort: 1,
      reportData: [],
      loading: false,
    };
    const {dispatch}=this.props;
    dispatch({
      type:FETCH_DEVICES
    })
  }

  handleSortChange = (e) => {
    const sort = e.target.value;

    this.setState({sort})
  };
  handleFetchReportData = async (params) => {
    this.setState({loading: true, type: params.type});
    if (localStorage.getItem('user')) {
      var company_id = JSON.parse(localStorage.getItem('user')).company_id;
    }
    var url=`device_mileage/?company_id=${company_id}&start_time=${params.start_time}&end_time=${params.end_time}`;
    const response = await new Promise(resolve => {
      request({url}).then(res => {
        resolve(res.data)
      });
    });
    /**
     * 关联查询
     */
    var arr=[];
    var device_list=this.props.deviceList.deviceList.data;
    for (var i=0;i<response.length;i++){
      for (var j=0;j<device_list.length;j++){
        if(response[i].device_id==device_list[j].device_id){
          response[i].device_name=device_list[j].device_name;
          response[i].key=i;
          arr.push(response[i])
        }
      }
    }
    this.setState({reportData: arr, loading: false,});
  };



  render() {
    return (
        <div>
          <PageHeaderWrapper title="里程报表">
            <Card bordered={false}>
              <MileageDataFilter onFetch={this.handleFetchReportData}/>
              {/*<div style={{float: 'right'}}>*/}
              {/*  <Radio.Group defaultValue="1" onChange={this.handleSortChange}>*/}
              {/*    <Radio.Button value="1"><Icon type="up"/> 升序排列</Radio.Button>*/}
              {/*    <Radio.Button value="-1">降序排列 <Icon type="down"/></Radio.Button>*/}
              {/*  </Radio.Group>*/}
              {/*</div>*/}
              <MileageDataTable reportData={this.state.reportData} loading={this.state.loading} type={this.state.type}/>
            </Card>
          </PageHeaderWrapper>
        </div>
    )
  }
}


export default Mileage;